<template>
  <div>
    <!-- 热点区域 -->
    <!-- :newsList="newsList" -->
    <HotInfo></HotInfo>
    <!-- 疫情小导航 -->
    <div class="list">
      <div class="list-item">
        <img src="../../assets/images/地区分布 (1).png" alt="" />
        <div class="item-title">风险地区</div>
      </div>
      <div class="list-item">
        <img src="../../assets/images/核算检测 (1).png" alt="" />

        <div class="item-title">核算检测</div>
      </div>
      <div class="list-item">
        <img src="../../assets/images/合_22智慧防疫 (1).png" alt="" />

        <div class="item-title">防疫物资</div>
      </div>
      <div class="list-item">
        <img src="../../assets/images/交通出行 (1).png" alt="" />

        <div class="item-title">出行政策</div>
      </div>
    </div>
    <!--疫情数据 -->
    <CovNumber :covInfo="covInfo" />
    <!-- 国内疫情图 -->
    <!-- <ChianMap /> -->
    <MyMap
      title="国内疫情图"
      @changeTabMap="changeTabMap"
      :curConfirm="curConfirm"
      :confirm="confirm"
      main="main1"
    />
    <MyMap
      title="海外疫情图"
      @changeTabMap="changeTabMap2"
      :curConfirm="worldCurConfirm"
      :confirm="worldConfirm"
      main="main2"
    />
  </div>
</template>

<script>
import HotInfo from "@/views/Home/CovInfo/HotInfo.vue";
import CovNumber from "@/views/Home/CovInfo/CovNumber.vue";
// import ChianMap from "./Map/ChianMap.vue";
import MyMap from "@/components/MyMap.vue";

export default {
  name: "MyHome",
  data() {
    return {
      // 新闻热点 【暂时未传给子组件，因api次数问题】
      newsList: [],
      // 国内疫情数据
      covInfo: {
        code: 200,
        msg: "success",
        result: {
          desc: {
            id: 1,
            createTime: 1579537899000,
            modifyTime: 1609818204000,
            currentConfirmedCount: 1353,
            confirmedCount: 97061,
            suspectedCount: 4339,
            curedCount: 90914,
            deadCount: 4794,
            seriousCount: 318,
            suspectedIncr: 16,
            currentConfirmedIncr: 23,
            confirmedIncr: 89,
            curedIncr: 63,
            deadIncr: 3,
            seriousIncr: 24,
            yesterdayConfirmedCountIncr: 1515,
            yesterdaySuspectedCountIncr: 10,
            foreignStatistics: {
              currentConfirmedCount: 26610735,
              confirmedCount: 85520276,
              suspectedCount: 4,
              curedCount: 57061764,
              deadCount: 1847777,
              suspectedIncr: 0,
              currentConfirmedIncr: 58816,
              confirmedIncr: 446720,
              curedIncr: 380719,
              deadIncr: 7185,
            },
            globalStatistics: {
              currentConfirmedCount: 26612088,
              confirmedCount: 85617337,
              curedCount: 57152678,
              deadCount: 1852571,
              currentConfirmedIncr: 58839,
              confirmedIncr: 446809,
              curedIncr: 380782,
              deadIncr: 7188,
            },
          },
        },
      },
      curConfirm: [],
      confirm: [],
      worldCurConfirm: [],
      worldConfirm: [],
    };
  },
  components: {
    HotInfo,
    CovNumber,
    // ChianMap,
    MyMap,
  },
  created() {
    // this.getNewsList();
    this.getChina();
    this.getWorld();
  },
  methods: {
    // 新闻热点
    getNewsList() {
      this.$api.reqNewsList().then((res) => {
        console.log(res.data);
        this.newsList = res.data.result.newslist;
      });
    },
    changeTabMap(val) {
      this.$myEcharts.chinaMap("main1", val);
    },
    changeTabMap2(val) {
      this.$myEcharts.worldMap("main2", val);
    },

    // 获取中国疫情图api
    async getChina() {
      const res = await this.$api.reqChina();
      const data = res.data.china.retdata;
      let arr = [];
      data.forEach((element) => {
        let obj = {};
        obj.name = element.xArea;
        obj.value = element.curConfirm;
        arr.push(obj);
      });
      let arr2 = [];
      data.forEach((element) => {
        let obj = {};
        obj.name = element.xArea;
        obj.value = element.confirm;
        arr2.push(obj);
      });
      this.curConfirm = arr; // 现有确诊
      this.confirm = arr2; // 累计确诊
      this.$myEcharts.chinaMap("main1", arr);
    },
    // 获取世界疫情图api
    async getWorld() {
      const res = await this.$api.reqWorld();
      const data = res.data.world.retdata;
      let arr = [];
      data.forEach((element) => {
        let obj = {};
        obj.name = element.ctry_name;
        obj.value = element.ctry_total.suspect;
        arr.push(obj);
      });

      let arr2 = [];
      data.forEach((element) => {
        let obj = {};
        obj.name = element.ctry_name;
        obj.value = element.ctry_total.confirm;
        arr2.push(obj);
      });
      this.worldCurConfirm = arr; //现有确诊
      this.worldConfirm = arr2; //累计确诊
      this.$myEcharts.worldMap("main2", arr);
    },
  },
};
</script>

<style scoped lang="scss" >
.logo {
  width: 100%;
}
.list {
  display: flex;
  justify-content: space-between;
  padding: 0.15rem 0.35rem;

  .list-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    .item-title {
      font-size: 12px;
      color: #1a1a1a;
      padding-top: 0.1rem;
    }
  }
}
</style>